<template>
	<view class="page">
		<l-file ref="lFile" @up-success="onSuccess">
		</l-file>
		<uni-list>
			<uni-list-item v-for="(item,index) of hasVal" :key="index" :showArrow="true" :showClear="isShowClear(item)" @iconClear="clearFunc(index)">
				<view class="tui-flex align-center">
					<view class="tui-col-5"><om-label :label="titleName" :required="required"></om-label></view>
					<view style="overflow: hidden" @click="onOpenDoc(item)">
						{{item.fileName}}
					</view>
				</view>
			</uni-list-item>
			<!-- #ifdef H5 -->
			<uni-list-item :showArrow="false">
				<button type="primary" size="mini" class="om-btn-color" @tap="onUploadH5">选择文件</button>
			</uni-list-item>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<uni-list-item :showArrow="false">
				<button type="primary" size="mini" class="om-btn-color" @tap="onUpload">选择文件</button>
			</uni-list-item>
			<!-- #endif -->
		</uni-list>
	</view>
</template>

<script>
	let app = getApp()
	import lFile from '@/components/l-file/l-file.vue'
	export default {
		components:{lFile},
		computed:{
			isShowClear(){
				return (item)=>{
					if(item.fileName){
						return true
					}else{
						return false
					}
				}
			},
			hasVal(){
				if(this.files.length){
					return  this.files
				}
			}
		},
		data() {
			return {
				titleName:'文件名称',
				titleName2:"查看文件",
				required:false,
				fileSaveName:"",
				formate:'',
				url:'',
				fileName:'',
				files:[],
				filetype:'',
				dirName:"",
				file:{
					fileName:"",
					dirName:"",
					fileSaveName:""
				}
			}
		},
		methods:{
			onUploadH5(){
				uni.chooseFile({
					success: (res) => {
						let _that = this
						if(_that.files.length===1 && _that.type === "one-on-one"){
							_that.om.toast("当前表单只能上传一个附件",3000)
							return
						}
						if(_that.filetype && res.tempFiles[0].name.substring(res.tempFiles[0].name.length-3,res.tempFiles[0].name.length)!==this.filetype){
							_that.om.toast("当前表单限,职能上传"+this.filetype+"类型的文件")
							return
						}
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url:app.globalData.url + _that.url,
							filePath:tempFilePaths[0],
							name:"file",
							formData:{
								
							},
							success:(res)=>{
								let data = JSON.parse(res.data)
								let obj = {
									fileName:data.value.uploadName,
									fileSaveName:data.value.saveName,
									dirName:data.value.dirName,
									filePath:data.value.saveName
								}
								let pages = getCurrentPages();
								let prevPage = pages[ pages.length - 2 ]
								prevPage.$vm.fileName = data.value.uploadName
								prevPage.$vm.fileSaveName = data.value.saveName
								_that.files.push(obj)
								prevPage.$vm.files = _that.files
							}
						})
					},
					fail: (res) => {
						this.om.toast(res)
					}
				})
			},
			onOpenDoc(item) {
				// #ifdef H5
				if(item.fileSaveName.substr(-4) !== ".jpg" && item.fileSaveName.substr(-4) !== ".png" && item.fileSaveName.substr(-4) !== ".gif"){
					this.om.toast("h5暂不支持浏览该文件类型")
					return
				}
				// #endif
				let url = app.globalData.url + item.dirName+"/"+item.fileSaveName
				/* 下载返回临时路径（退出应用失效） */
				this.$refs.lFile.download(url)
				.then(path=>{
					/* 预览 */
					this.$refs.lFile.open(path);
				});
			},
			onOpenDocH5(item){
				uni.downloadFile({
				  url: app.globalData.url + item.dirName+"/"+item.fileSaveName,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
			onUpload() {
				if(this.files.length===1 && this.type === "one-on-one"){
					this.om.toast("当前表单只能上传一个附件",3000)
					return
				}
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif 
					//非真实地址，记得更换,调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: app.globalData.url + this.url,
					//默认file,上传文件的key
					name: 'file',
					// header: {'Authorization':'token'},
					//...其他参数
				});
			},
			onSuccess(res) {
				let o = JSON.parse(res.data.id)
				let obj = {
					fileName:res.fileName,
					fileSaveName:o.value.saveName,
					dirName:o.value.dirName,
					filePath:o.value.saveName
				}
				let pages = getCurrentPages();
				let prevPage = pages[ pages.length - 2 ]
				prevPage.$vm.fileName = res.fileName
				prevPage.$vm.fileSaveName = o.value.saveName
				this.files.push(obj)
				prevPage.$vm.files = this.files
			},
			clearFunc(index){
				if(this.files.length === 1 ){
					let pages = getCurrentPages();
					let prevPage = pages[ pages.length - 2 ]
					prevPage.$vm.fileName = ""
					prevPage.$vm.fileSaveName = ""
					prevPage.$vm.files = []
					this.files.splice(index,1)
				}
				this.files.splice(index,1)
			}
		},
		onLoad(options) {
			if(!options.url){
				this.om.toast("未传递上传路径")
			}else{
				this.url = options.url
			}
			if(options.type){
				this.type = options.type
			}
			if(options.filetype){
				this.filetype = options.filetype
			}
			let pages = getCurrentPages();
			let prevPage = pages[ pages.length - 2 ]
			if(prevPage.$vm.formdata.fileName){
				this.fileName = prevPage.$vm.formdata.fileName
			}
			if(prevPage.$vm.formdata.fileUrl){
				this.fileSaveName = prevPage.$vm.formdata.fileUrl
			}
			if(prevPage.$vm.formdata.dir){
				this.dirName = prevPage.$vm.formdata.dir
				this.file.dirName = prevPage.$vm.formdata.dir
			}
			if(prevPage.$vm.formdata.fileList && prevPage.$vm.formdata.fileList !== undefined && prevPage.$vm.formdata.fileList.length){
				this.dirName = prevPage.$vm.formdata.fileList[0].dirName
				this.file.dirName = prevPage.$vm.formdata.fileList[0].dirName
			}
			if(prevPage.$vm.formdata.fileName && prevPage.$vm.formdata.fileUrl){
				this.file.fileName = prevPage.$vm.formdata.fileName
				this.file.fileSaveName = prevPage.$vm.formdata.fileUrl
			}
			if(this.file.fileName && this.file.fileSaveName && this.file.dirName){
				this.files.push(this.file) 
			}
		},
		onShow() {
		}
	}
</script>

<style>
</style>
